<template>
    <f7-login-screen id="loginScreen" class="login">
        <f7-view>
            <f7-pages navbar-through>
                <f7-page login-screen>
                    <f7-navbar>
                        <f7-nav-left sliding>
                            <f7-link icon-fa="close" close-login-screen></f7-link>
                        </f7-nav-left>
                        <f7-nav-center>登录</f7-nav-center>
                        <f7-nav-right sliding>
                            <f7-link open-login-screen="#registerScreen">注册</f7-link>
                        </f7-nav-right>
                    </f7-navbar>
                    <f7-login-screen-title>
                        <div class="avatar">
                            <img src="../assets/images/test.jpg" alt="">
                        </div>
                    </f7-login-screen-title>
                    <f7-list form>
                        <f7-list-item>
                            <f7-input name="phone" placeholder="手机号" type="text"></f7-input>
                        </f7-list-item>
                        <f7-list-item v-show="!isMsgLogin">
                            <f7-input name="password" type="password" placeholder="密码"></f7-input>
                        </f7-list-item>
                        <f7-list-item v-show="isMsgLogin">
                            <f7-input name="code" type="text" placeholder="手机验证码"></f7-input>
                            <f7-button class="btn-code">获取验证码</f7-button>
                        </f7-list-item>
                    </f7-list>
                    <f7-list>
                        <f7-list-button class="btn-login" title="登录" href="/"></f7-list-button>
                        <f7-list-label class="clearfix">
                            <f7-link class="fl" href="/findPass/">忘记密码</f7-link>
                            <f7-link class="fr" @click="switchLoginWay" v-show="!isMsgLogin">手机短信登录</f7-link>
                            <f7-link class="fr" @click="switchLoginWay" v-show="isMsgLogin">手机常规登录</f7-link>
                        </f7-list-label>
                    </f7-list>
                </f7-page>
            </f7-pages>
        </f7-view>
    </f7-login-screen>
</template>

<style lang="scss">
    .login {
        .avatar {
            width: 70px;
            height: 60px;
            margin: 0 auto;
            border-radius: 5px;
            overflow: hidden;

            img {
                display: block;
                width: 100%;
                min-height: 100%;
            }
        }

        .btn-login {
            a {
                margin: 0 15px;
                background: #007aff;
                color: #fff;
            }
        }

        .btn-code {
            width: 120px;
        }
    }
</style>

<script>
    export default {
        data() {
            return {
                isMsgLogin: false
            }
        },
        methods: {
            // 登录方式切换
            switchLoginWay() {
                this.isMsgLogin = !this.isMsgLogin
            },
        }
    }
</script>

